@import './var.scss';
@import '@/uni.scss';

$flex: (row: 'row', column: 'column');
$justify: (start: 'flex-start', center: 'center', end: 'flex-end', between: 'space-between');
$align: (start: 'flex-start', center: 'center', end: 'flex-end');
$wrap: (wrap: 'wrap', nowrap: 'nowrap');
$position: (relative: 'relative', absolute: 'absolute', fixed: 'fixed');
$text-align: (left: 'left', center: 'center', right: 'right');
$opacity: (1: 1, 0: 0, hover: $n-opacity-hover, disabled: $n-opacity-disabled);
$bg: (nav: $n-nav-bg-color, primary: $n-color-primary, success: $n-color-success, warning: $n-color-warning, error: $n-color-error, light: $n-bg-color-light, dark: $n-bg-color-dark, inverse: $n-bg-color-inverse, custom: $n-color-custom, link: $n-color-link, none: 'transparent', page: $n-bg-color-page, hover: $n-bg-color-hover, mask: $n-bg-color-mask, mask-dark: $n-bg-color-mask-dark, border: $n-border-color, border-light: $n-border-color-light, border-dark: $n-border-color-dark);
$color: (nav-title: $n-nav-title-color, nav-icon: $n-nav-icon-color, nav-item: $n-nav-item-color, primary: $n-color-primary, success: $n-color-success, warning: $n-color-warning, error: $n-color-error, inverse: $n-bg-color-inverse, custom: $n-color-custom, link: $n-color-link, text: $n-text-color, second: $n-text-color-second, third: $n-text-color-third, forth: $n-text-color-forth, place: $n-text-color-place, disabled: $n-text-color-disabled);
$size: (nav-title: $n-nav-title-size, nav-icon: $n-nav-icon-size, nav-item: $n-nav-item-size, ss: $n-font-size-ss, s: $n-font-size-s, base: $n-font-size-base, l: $n-font-size-l, ll: $n-font-size-ll);
$height: (ss: $n-height-ss, s: $n-height-s, base: $n-height-base, l: $n-height-l, ll: $n-height-ll);
$lh: (ss: $n-lh-ss, s: $n-lh-s, base: $n-lh-base, l: $n-lh-l, ll: $n-lh-ll);
$border: (light: $n-border-color-light, dark: $n-border-color-dark, primary: $n-color-primary, success: $n-color-success, warning: $n-color-warning, error: $n-color-error, inverse: $n-bg-color-inverse, custom: $n-color-custom, link: $n-color-link);
$radius: (ss: $n-border-radius-ss, s: $n-border-radius-s, base: $n-border-radius-base, l: $n-border-radius-l, ll: $n-border-radius-ll, none: 0);
$space: (ss: $n-space-ss, s: $n-space-s, base: $n-space-base, l: $n-space-l, ll: $n-space-ll);
$direction: (left: 'left', top: 'top', right: 'right', bottom: 'bottom');

.n-flex {
	@each $k, $v in $flex {
		&-#{$k} {
			/* #ifndef APP-NVUE */
			display: flex;
			box-sizing: border-box;
			flex-direction: #{$v} !important;
			/* #endif */
			/* #ifdef APP-NVUE */
			flex-direction: #{$v};
			/* #endif */
		}
	}
	&-one {
		/* #ifndef H5 || MP-TOUTIAO */
		flex: 1;
		/* #endif */
		/* #ifdef H5 || MP-TOUTIAO */
		flex: 1 !important;
		/* #endif */
	}
}
.n-justify {
	@each $k, $v in $justify {
		&-#{$k} {
			justify-content: #{$v};
		}
	}
}
.n-align {
	@each $k, $v in $align {
		&-#{$k} {
			/* #ifdef APP-NVUE */
			align-items: #{$v};
			/* #endif */
			/* #ifndef APP-NVUE */
			align-items: #{$v} !important;
			/* #endif */
		}
	}
}
.n-wrap {
	@each $k, $v in $wrap {
		&-#{$k} {
			flex-wrap: #{$v};
		}
	}
}
.n-position {
	@each $k, $v in $position {
		&-#{$k} {
			/* #ifdef H5 || MP-TOUTIAO */
			position: #{$v} !important;
			/* #endif */
			/* #ifndef H5 || MP-TOUTIAO */
			position: #{$v};
			/* #endif */
		}
	}
}
.n-full {
	&-width {
		width: 750rpx;
	}
	&-height {
		flex: 1;
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}
	&-min-height {
		/* #ifndef APP-NVUE */
		min-height: 100%;
		/* #endif */
	}
}
.n-text-align {
	@each $k, $v in $text-align {
		&-#{$k} {
			text-align: #{$v};
		}
	}
}
.n-opacity {
	@each $k, $v in $opacity {
		&-#{$k} {
			opacity: #{$v};
		}
	}
}
.n-bg {
	@each $k, $v in $bg {
		&-#{$k} {
			background-color: #{$v};
		}
	}
	&-gradient {
		background-image: linear-gradient(to right, $n-color-warning, $n-color-error);
	}
}
.n-color {
	@each $k, $v in $color {
		&-#{$k} {
			color: #{$v};
		}
	}
}
.n-size {
	@each $k, $v in $size {
		&-#{$k} {
			font-size: #{$v};
		}
	}
}
.n-height {
	@each $k, $v in $height {
		&-#{$k} {
			height: #{$v};
		}
	}
	&-1 {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}
	&-min {
		/* #ifndef APP-NVUE */
		min-height: 100%;
		/* #endif */
	}
}
.n-weight {
	@for $i from 1 to 10 {
		&-#{$i} {
			font-weight: #{$i*100};
		}
	}
}
.n-lh {
	@each $k, $v in $lh {
		&-#{$k} {
			line-height: #{$v};
		}
	}
}
.n-lines {
	&-nowrap {
		/* #ifndef APP-NVUE */
		display: block;
		white-space: nowrap;
		/* #endif */
		/* #ifdef APP-NVUE */
		lines: 1;
		/* #endif */
	}
	&-1 {
		lines: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		/* #ifndef APP-NVUE */
		display: block;
		white-space: nowrap;
		/* #endif */
	}
	@for $i from 2 to 6 {
		&-#{$i} {
			overflow: hidden;
			/* #ifdef APP-NVUE */
			lines: #{$i};
			text-overflow: ellipsis;
			/* #endif */
			/* #ifndef APP-NVUE */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: #{$i};
			/* #endif */
		}
	}
}
.n-border {
	&-all {
		/* #ifdef H5 || MP-TOUTIAO */
		border-width: $n-border-width !important;
		border-style: solid !important;
		border-color: $n-border-color !important;
		/* #endif */
		/* #ifndef H5 || MP-TOUTIAO */
		border-width: $n-border-width;
		border-style: solid;
		border-color: $n-border-color;
		/* #endif */
		
		@each $k, $v in $border {
			&-#{$k} {
				/* #ifdef H5 || MP-TOUTIAO */
				border-width: $n-border-width !important;
				border-style: solid !important;
				border-color: #{$v} !important;
				/* #endif */
				/* #ifndef H5 || MP-TOUTIAO */
				border-width: $n-border-width;
				border-style: solid;
				border-color: #{$v};
				/* #endif */
			}
		}
	}
	@each $k, $v in $direction {
		&-#{$k} {
			/* #ifdef H5 || MP-TOUTIAO */
			border-#{$v}-color: $n-border-color !important;
			border-#{$v}-width: $n-border-width !important;
			border-#{$v}-style: solid !important;
			/* #endif */
			/* #ifndef H5 || MP-TOUTIAO */
			border-#{$v}-color: $n-border-color;
			border-#{$v}-width: $n-border-width;
			border-#{$v}-style: solid;
			/* #endif */
			
			@each $kk, $vv in $border {
				&-#{$kk} {
					/* #ifdef H5 || MP-TOUTIAO */
					border-#{$v}-width: $n-border-width !important;
					border-#{$v}-style: solid !important;
					border-#{$v}-color: #{$vv} !important;
					/* #endif */
					/* #ifndef H5 || MP-TOUTIAO */
					border-#{$v}-width: $n-border-width;
					border-#{$v}-style: solid;
					border-#{$v}-color: #{$vv};
					/* #endif */
				}
			}
		}
	}
	&-none {
		/* #ifdef H5 || MP-TOUTIAO */
		border-width: 0 !important;
		/* #endif */
		/* #ifndef H5 || MP-TOUTIAO */
		border-width: 0;
		/* #endif */
	}
}
.n-radius {
	@each $k, $v in $radius {
		&-#{$k} {
			border-radius: #{$v};
		}
	}
}
.n-ps {
	@each $k, $v in $direction {
		&-#{$k} {
			@each $kk, $vv in $space {
				&-#{$kk} {
					padding-#{$v}: #{$vv};
				}
			}
		}
	}
}
.n-ms {
	@each $k, $v in $direction {
		&-#{$k} {
			@each $kk, $vv in $space {
				&-#{$kk} {
					margin-#{$v}: #{$vv};
				}
			}
		}
	}
}
.n-overflow {
	&-hidden {
		overflow: hidden;
	}
}
.n-hover {
	&-opacity {
		opacity: $n-opacity-hover;
	}
	&-bg {
		background-color: $n-bg-color-hover;
		
		&-dark {
			background-color: $n-bg-color-hover-dark;
		}
		&-opacity {
			background-color: $n-bg-color-hover;
			opacity: $n-opacity-hover;
		}
	}
}
.n-disabled {
	opacity: $n-opacity-disabled;
	&-text {
		color: $n-text-color-disabled;
	}
}
